<template> 
    <div>
        <el-container>
            <el-main>
                    <el-header>
                        <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                            <el-form-item label="菜类名">
                                <el-input v-model="queryForm.dishTypeName " placeholder="请输入菜类"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="getDishType(null)">查询</el-button>
                                <el-button type="success" circle icon="el-icon-plus" @click="addDialogVisible=true"></el-button>
                            </el-form-item>
                        </el-form>
                    </el-header>
                   
                    <el-main>
                        <el-table :data="questions" style="width: 100%">
                            <el-table-column
                                prop="id"
                                label="id">
                            </el-table-column>
                            <el-table-column
                                prop="dishTypeName"
                                label="菜类名">
                            </el-table-column>
                            <el-table-column
                            prop="status"
                            label="状态">
                            </el-table-column>
                            <!-- <el-table-column
                            prop="userId"
                            label="关联用户id">
                            </el-table-column> -->
                            <el-table-column
                                fixed="right"
                                label="操作"
                                width="100">
                                <template slot-scope="scope">
                                    <el-button @click="handleClick(scope.row)"  type="text" size="small">修改信息</el-button>
                                    <el-button @click="delques(scope.row)"  type="text" size="small">删除信息</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                    <el-footer>
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page.current"
                            :page-size="page.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page.total">
                        </el-pagination>
                    </el-footer>
            </el-main>
        </el-container>

        <el-dialog
        title="添加菜品"
        :visible.sync="addDialogVisible"
        width="35%"
        >
            <el-form :model="addDishTypeForm" class="demo-form-inline">
                <el-form-item label="添加菜类名">
                    <el-input v-model="addDishTypeForm.dishTypeName" placeholder="请输入添加菜类名"></el-input>
                </el-form-item>
                <el-form-item label="添加菜类的关联商户id">
                    <el-input v-model="addDishTypeForm.userId" placeholder="请输入添加菜类的关联商户id"></el-input>
                </el-form-item>
                <br>
                <el-form-item>
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleAdd">确 定</el-button>    
                </el-form-item>
            </el-form>
        </el-dialog>

        
        <!-- <el-dialog
            title="删除菜类"
            :visible.sync="delDialogVisible"
            width="30%"
            >
            <el-form :model="delForm" class="demo-form-inline">
                <el-form-item label="菜类id">
                    <el-input v-model="delForm.id" placeholder="请输入菜类id"></el-input>
                </el-form-item>    
                <el-form-item>
                    <el-button @click="delDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="delques">确 定</el-button>    
                </el-form-item>
            </el-form> 
        </el-dialog>
         -->

        
        <el-dialog
            title="修改菜类信息"
            :visible.sync="detailDialogVisible"
            width="30%"
            >
            <el-form :model="modifyForm" class="demo-form-inline">
                <el-form-item label="菜类id">
                    <el-input v-model="modifyForm.id" disabled="true" placeholder="请输入菜类id"></el-input>
                </el-form-item>
                <el-form-item label="菜类名">
                    <el-input v-model="modifyForm.dishTypeName" placeholder="请输入菜类名"></el-input>
                </el-form-item>
                <el-form-item label="关联商户id">
                    <el-input v-model="modifyForm.userId" placeholder="请输入关联商户id"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="modifyForm.status" placeholder="请输入状态">
                    <el-option label="启用" value="USE"></el-option>
                    <el-option label="淘汰" value="DISCARD"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="detailDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleModify">确 定</el-button>    
                </el-form-item>
            </el-form>        
        </el-dialog>
    </div>
</template>
<script>
import axios from "axios";

        export default({
            data() {
                return {
                    queryForm: {
                        id:"",                      
                    },
                    questions:[],
                    
                    addDialogVisible: false,
                    detailDialogVisible:false,
                    delDialogVisible:false,
                    question:{},
                    modifyForm:{},
                    delForm:{},
                    addDishTypeForm:{},
                    page:{
                        current:1,
                        total:0,
                        pageSize:10
                    },
                    // options:[],
                    sel:{
                        cotent:"",
                        correctMark:"",
                    }
                };
            },
            methods: {
                handleSizeChange(){

                },
                handleCurrentChange(current){
                    this.getDishType(current);
                },
                delques(questions){
                    var id = questions.id
                    this.$axios.delete("http://localhost:8082/delDishType?dishTypeId="+id)
                    .then(response=>{
                        if(response.data.code!='200'){
                            this.$message.error("删除失败："+response.data.message);
                            
                        }
                        if(response.data.code=='200'){
                            // this.$message.success("删除成功");
                             this.$message({
                                message: '删除成功',
                                type: 'success'
                                });
                            this.getDishType(null);
                        }
                    })
                    .catch(error=>{ //通信异常
                        console.error(error);
                        this.addDialogVisible=false;
                    })
                },
                // ================修改菜品请求============
                handleModify(){
                    this.modifyForm.storeId=localStorage.getItem("storeId"),
                    this.$axios.put("http://localhost:8082/modifyDishType",this.modifyForm)
                    .then(response=>{
                        if(response.data.code!='200'){
                            this.$message.error("修改失败："+response.data.message);
                            this.detailDialogVisible=false;
                        }
                        if(response.data.code=='200'){
                           
                             this.$message({
                                message: '修改成功',
                                type: 'success'
                                });
                            this.detailDialogVisible=false;
                        }
                    })
                    .catch(error=>{ //通信异常
                        console.error(error);
                        this.addDialogVisible=false;
                    })

                    console.log(this.modifyForm);
                    this.detailDialogVisible=false;
                },
                handleClick(row){
                    
                    this.modifyForm=row;
                    this.detailDialogVisible=true;
                },
                // dele(row){
                    
                //     this.delForm=row;
                //     this.delDialogVisible=true;
                // },
                handleSelect(key, keyPath) {
                    console.log(key, keyPath);
                },
                // enter(){
                //     this.options.push(this.sel);
                //     this.sel={};
                // },

                handleAdd(){
                    // this.addForm.options=this.options
                    this.addDishTypeForm.storeId=localStorage.getItem("storeId"),
                    this.$axios.post("http://localhost:8082/addDishType",this.addDishTypeForm)
                    .then(response=>{//业务异常
                        if(response.data.code!='200'){
                            this.$message.error("添加失败："+response.data.message);
                            this.addDialogVisible=false;
                        }
                        if(response.data.code=='200'){
                            this.$message.success("添加成功");
                            // this.$message({
                            //     message: '添加成功',
                            //     type: 'success'
                            //     });
                            this.addDialogVisible=false;
                        }
                        
                    })
                    .catch(error=>{ //通信异常
                        console.error(error);
                        this.addDialogVisible=false;
                    })
                },
                //查询商户旗下的所有菜类
                getDishType(current){                 
                    current = current?current:1;
                    this.$axios.get("http://localhost:8082/selDishTypeByName",
                    {
                        params: {
                            // userId:this.queryForm.id,
                            storeId:localStorage.getItem("storeId"),
                            dishTypeName:this.queryForm.dishTypeName,
                            current:current
                            
                        }
                    }
                    ).then(
                        response=>{
                            
                            let result = response.data;
                            if(result.code!='200'){
                                this.$message(result.message);
                                this.questions="";
                            }else{
                                let pageResult = result.data;
                                for(var i =0;i<pageResult.records.length;i++){
                                    if(pageResult.records[i].status=='DISCARD'){
                                        pageResult.records[i].status='废弃';
                                    }
                                    if(pageResult.records[i].status=='USE'){
                                        pageResult.records[i].status='启用';
                                    }

                                }
                                this.questions= pageResult.records;
                                this.page.total=pageResult.total;
                                this.page.current=pageResult.current;
                                this.page.size=pageResult.size; 
                            }
                        }
                    ).catch(error=>{
                        console.error(error);
                        this.$message.error('哦豁，系统出了点那啥');
                    });

                }
            }
        });
</script>
